<script setup lang="js">
import { reactive } from 'vue';

let menus = reactive([]);

// 获取菜单列表
menus = JSON.parse(sessionStorage.getItem("menuList"));
</script>

<template>
  <el-aside id="asideNav">
    <div class="logo-name">
      <p>东软颐养中心</p>
      <img src="@/assets/img/logo.png" class="logo-png" />
    </div>
    <!-- 菜单列表 -->
    <el-menu
      active-text-color="#ffd04b"
      background-color="#3CA2E0"
      :default-active="$route.path"
      :router="true"
      unique-opened
      text-color="#fff"
    >
      <template v-for="menu in menus">
        <el-sub-menu :index="menu.menusIndex">
          <template #title>
            <el-icon>
              <!-- 动态获取图标 -->
              <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.title }}</span>
          </template>
          <template v-for="menu in menu.children">
            <el-menu-item :index="menu.path">
              <el-icon>
                <component :is="menu.icon" />
              </el-icon>
              {{ menu.title }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-aside>
</template>

<style lang="css" scoped>
#asideNav {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100vh;
  /* 下面内容为自定义调整 */
  position: fixed; /* 让侧边栏固定 */
  top: 0;
  left: 0;
  background-color: #3CA2E0; /* 背景色 */
  box-sizing: border-box; /* 确保不因边框而影响布局 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

#asideNav .logo-name {
  width: 100%;
  height: 150px;
  background-color: #3CA2E0;
}

#asideNav .logo-name .logo-png {
  width: 165px;
  height: 165px;
  margin: -30px 0 0 10px;
}

#asideNav .logo-name p {
  font-weight: 800;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  flex: 1;
  border-right: none;
}
</style>
